<template>
	<view class="content ml20 mr20">
		<view class="dis_sb mt60 mb40 ml20 mr20">
			<view class="line26">
				<view class="f34 clo-navyBlue" >数据导览</view>
				<view class="clo-gray f24">统计年度数据、月度数据、昨日数据</view>
			</view>
			<image src="/static/pic1.png" mode="widthFix" class="pic"></image>
		</view>
		<view class="bgfff rad25 overflowH mb40">
			<view class="dis_sb pl20 pr20 tit pt10 pb10" :style="{ backgroundColor: open=='year' ? '#f7fbfe' : '' }">
				<view class="clo-navyBlue f32">数据汇总</view>
				<view class="iconfont" :style="{ transform: open=='year' ? 'rotate(180deg)' : 'rotate(0deg)' }" @click="change('year')">&#xe632;</view>
			</view>
			<view class="dis_sb fww pl20 pb20 line18" v-if="open=='year'">
				<view class="dis_sc mt20 w30per ">
					<image src="/static/icon1.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.count}}</view>
						<view class="clo-999 f24">订单总数</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon2.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.unload_weight}}</view>
						<view class="clo-999 f24">销售总吨数</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon3.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.sale_income}}</view>
						<view class="clo-999 f24">销售收入(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon4.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.receive_money}}</view>
						<view class="clo-999 f24">应收金额(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon5.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.received_money}}</view>
						<view class="clo-999 f24">已收款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon6.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.not_receive_money}}</view>
						<view class="clo-999 f24">未收款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon7.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.loading_goods_price}}</view>
						<view class="clo-999 f24">应付金额(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon8.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.pay_money}}</view>
						<view class="clo-999 f24">已付款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon9.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.not_pay_money}}</view>
						<view class="clo-999 f24">未付款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon12.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.pound_difference}}</view>
						<view class="clo-999 f24">磅差(吨)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon11.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.warehouse_profit}}</view>
						<view class="clo-999 f24">库房累计利润(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon10.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.car_fleet_profit}}</view>
						<view class="clo-999 f24">车队累计利润(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon13.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.yesterday_warehouse_profit}}</view>
						<view class="clo-999 f24">库房昨日利润(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon14.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.yesterday_car_fleet_profit}}</view>
						<view class="clo-999 f24">车队昨日利润(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon15.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.year.undistributed_profit}}</view>
						<view class="clo-999 f24">未分配利润(元)</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bgfff rad25 mt20">
			<view class="dis_sb pl20 pr20 tit pt10 pb10" :style="{ backgroundColor: open=='month' ? '#f7fbfe' : '' }">
				<view class="clo-navyBlue f32">月度数据</view>
				<view class="iconfont" :style="{ transform: open=='month' ? 'rotate(180deg)' : 'rotate(0deg)' }"  @click="change('month')">&#xe632;</view>
			</view>
			<view class="dis_sb fww pl20 pb20 line18" v-if="open=='month'">
				<view class="dis_sc mt20 w30per ">
					<image src="/static/icon1.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.count}}</view>
						<view class="clo-999 f24">订单总数</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon2.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.unload_weight}}</view>
						<view class="clo-999 f24">销售总吨数</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon3.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.sale_income}}</view>
						<view class="clo-999 f24">销售收入(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon4.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.receive_money}}</view>
						<view class="clo-999 f24">应收金额(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon5.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.received_money}}</view>
						<view class="clo-999 f24">已收款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon6.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.not_receive_money}}</view>
						<view class="clo-999 f24">未收款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon7.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.loading_goods_price}}</view>
						<view class="clo-999 f24">应付金额(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon8.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.pay_money}}</view>
						<view class="clo-999 f24">已付款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon9.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.not_pay_money}}</view>
						<view class="clo-999 f24">未付款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon10.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.car_fleet_profit}}</view>
						<view class="clo-999 f24">车队利润(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon11.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.warehouse_profit}}</view>
						<view class="clo-999 f24">库房利润(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon12.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.month.pound_difference}}</view>
						<view class="clo-999 f24">磅差(吨)</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bgfff rad25 mt20">
			<view class="dis_sb pl20 pr20 tit pt10 pb10" :style="{ backgroundColor: open=='yesterday' ? '#f7fbfe' : '' }">
				<view class="clo-navyBlue f32">昨日数据</view>
				<view class="iconfont" :style="{ transform: open=='yesterday' ? 'rotate(180deg)' : 'rotate(0deg)' }" @click="change('yesterday')">&#xe632;</view>
			</view>
			<view class="dis_sb fww pl20 pb20 line18"  v-if="open=='yesterday'">
				<view class="dis_sc mt20 w30per ">
					<image src="/static/icon1.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.count}}</view>
						<view class="clo-999 f24">订单总数</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon2.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.unload_weight}}</view>
						<view class="clo-999 f24">销售总吨数</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon3.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.sale_income}}</view>
						<view class="clo-999 f24">销售收入(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon4.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.receive_money}}</view>
						<view class="clo-999 f24">应收金额(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon5.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.received_money}}</view>
						<view class="clo-999 f24">已收款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon6.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.not_receive_money}}</view>
						<view class="clo-999 f24">未收款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon7.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.loading_goods_price}}</view>
						<view class="clo-999 f24">应付金额(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon8.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.pay_money}}</view>
						<view class="clo-999 f24">已付款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon9.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.not_pay_money}}</view>
						<view class="clo-999 f24">未付款(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon10.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.car_fleet_profit}}</view>
						<view class="clo-999 f24">车队利润(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon11.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.warehouse_profit}}</view>
						<view class="clo-999 f24">库房利润(元)</view>
					</view>
				</view>
				<view class="dis_sc mt20 w30per">
					<image src="/static/icon12.png" mode="widthFix" class="image80"></image>
					<view class="ml20">
						<view class="f30 fwb">{{data.yesterday.pound_difference}}</view>
						<view class="clo-999 f24">磅差(吨)</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, computed, onUnmounted, getCurrentInstance } from 'vue'
import { onShow } from '@dcloudio/uni-app';
import { indexApi } from '@/utils/api'
const { proxy } = getCurrentInstance();
proxy.$checkUserType();
const open = ref('year')
const change = (e)=>{
    open.value = e
}
const data = reactive({
    year:{
        count:0,
        unload_weight:0,
        sale_income:0,
        receive_money:0,
        received_money:0,
        not_receive_money:0,
        loading_goods_price:0,
        pay_money:0,
        not_pay_money:0,
        car_fleet_profit:0,
        warehouse_profit:0,
		yesterday_car_fleet_profit:0,
		yesterday_warehouse_profit:0
		
    },
    // month:{
    //     count:0,
    //     unload_weight:0,
    //     sale_income:0,
    //     receive_money:0,
    //     received_money:0,
    //     not_receive_money:0,
    //     loading_goods_price:0,
    //     pay_money:0,
    //     not_pay_money:0,
    //     car_fleet_profit:0,
    //     warehouse_profit:0
    // },
    // yesterday:{
    //     count:0,
    //     unload_weight:0,
    //     sale_income:0,
    //     receive_money:0,
    //     received_money:0,
    //     not_receive_money:0,
    //     loading_goods_price:0,
    //     pay_money:0,
    //     not_pay_money:0,
    //     car_fleet_profit:0,
    //     warehouse_profit:0
    // }
})
onShow(()=>{
	indexApi().then(res => {
	    data.year = res.data.year_data
	    // data.month = res.data.month_data
	    // data.yesterday = res.data.yesterday_data
	})
})

</script>
<style>
	.pic {width: 130rpx;}
</style>
